<template>
  <div>
    <el-form :model="formData" :rules="formRules" label-width="120px">
      <el-form-item label="流程分类" prop="processCategory">
        <el-select v-model="formData.processCategory">
          <el-option
            v-for="item in categorys"
            :key="item.dictValue"
            :label="item.dictLabel"
            :value="item.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="流程标识key" prop="id">
        <el-input v-model="formData.id" />
      </el-form-item>
      <el-form-item label="流程名称" prop="name">
        <el-input v-model="formData.name" />
      </el-form-item>
      <el-form-item label="节点描述" prop="documentation">
        <el-input v-model="formData.documentation" />
      </el-form-item>
      <el-form-item label="执行监听器" prop="executionListener">
        <el-badge :value="executionListenerLength">
          <el-button @click="dialogName = 'executionListenerDialog'"> 编辑</el-button>
        </el-badge>
      </el-form-item>
      <el-form-item label="信号定义" prop="signal">
        <el-badge :value="signalLength">
          <el-button @click="dialogName = 'signalDialog'"> 编辑</el-button>
        </el-badge>
      </el-form-item>
    </el-form>

    <executionListenerDialog
      v-if="dialogName === 'executionListenerDialog'"
      :element="element"
      :modeler="modeler"
      @close="finishExecutionListener"
    />

    <signalDialog
      v-if="dialogName === 'signalDialog'"
      :element="element"
      :modeler="modeler"
      @close="finishExecutionListener"
    />
  </div>
</template>

<script setup>
  import { ref, watch, defineProps } from 'vue';
  import mixinPanel from '../../common/mixinPanel';
  import mixinExecutionListener from '../../common/mixinExecutionListener';
  import signalDialog from './property/signal.vue';
  import { commonParse } from '../../common/parseElement';

  const props = defineProps({
    modeler: {
      type: Object,
      required: true,
    },
    element: {
      type: Object,
      required: true,
    },
    categorys: {
      type: Array,
      default: () => [],
    },
  });

  const signalLength = ref(0);
  const formData = ref({});
  const formRules = ref({
    id: [{ required: true, message: 'Id 不能为空' }],
    documentation: [{ required: true, message: '流程名称不能为空' }],
  });

  const { updateProperties } = mixinPanel(props.modeler, props.element, formData);
  const { executionListenerDialog, executionListenerLength, dialogName, finishExecutionListener } =
    mixinExecutionListener(props.element);

  watch(
    () => formData.value.processCategory,
    (val) => {
      if (val === '') {
        val = null;
      }
      updateProperties({ 'flowable:processCategory': val });
    },
  );

  function computedSignalLength() {
    signalLength.value = props.element.businessObject.extensionElements?.values?.length ?? 0;
  }

  // eslint-disable-next-line
  function finishSignal() {
    if (dialogName.value === 'signalDialog') {
      computedSignalLength();
    }
    dialogName.value = '';
  }

  formData.value = commonParse(props.element);
</script>

<style scoped lang="scss"></style>
